<template>
  <div class="l-modal">
    <u-modal
      v-if="!isSlot"
      v-model="showModal"
      :content="contentVal"
      @confirm="confirm"
      @cancel="cancelModal"
      :show-cancel-button="true"
      :title="titleVal"
      :title-style="titleStyle"
    >
    </u-modal>
    <u-modal
      v-else
      v-model="showModal"
      @confirm="confirm"
      @cancel="cancelModal"
      :show-cancel-button="true"
      :title="titleVal"
      :title-style="titleStyle"
    >
      <slot></slot>
    </u-modal>
  </div>
</template>

<script>
export default {
  name: "l-modal",
  props: {
    title: String,
    isShow: {
      type: Boolean,
      default: false,
    },
    content: String,
    is_slot:{
      type: Boolean,
      default: false,
    }
  },
  data() {
    return {
      titleVal: "",
      titleStyle: {
        fontSize: "36rpx",
        color: "#333",
        paddingTop: "60rpx",
      },
      showModal: false,
      contentVal: "",
      isSlot:false
    };
  },
  computed: {},
  methods: {
    confirm() {
      this.$emit("modalBack");
    },
    cancelModal() {
      this.showModal = false;
      this.$emit("cancelBack");
    },
  },
  watch: {
    isShow(v) {
      this.showModal = v;
    },
    title(t){
      this.titleVal = t
    },
    content(v){
      this.contentVal = v
    },
    is_slot(v){
      this.isSlot = v
    }
  },

  // 组件周期函数--监听组件挂载完毕
  mounted() {
    this.showModal = this.isShow;
    this.isSlot = this.is_slot;
    this.titleVal = this.title;
    this.contentVal = this.content;
  },
};
</script>

<style lang="scss" scoped></style>